<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-s-order"></i> 订单管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-select v-model="id" placeholder="请选择店铺" @change="changeShop">
                    <el-option
                    v-for="item in shops"
                    :key="item.storeId"
                    :label="item.storeName"
                    :value="item.storeId">
                    </el-option>
                </el-select>
            </div>
            <el-table
                :data="orders"
                :span-method="objectSpanMethod"
                border
                style="width: 100%;margin-top:28px;">
                <el-table-column
                prop="orderDetailOrderId"
                label="订单ID"
                width="120">
                </el-table-column>
                <el-table-column
                prop="orderDetailCommodity.commodityName"
                label="订单购买商品名"
                width="180">
                </el-table-column>
                <el-table-column
                prop="orderDetailCommodity.commodityPrice"
                width="180"
                label="订单购买商品单价">
                </el-table-column>
                <el-table-column
                prop="orderDetailCommodity.commodityStore.storeName"
                width="200"
                label="订单购买商品所属商铺">
                </el-table-column>
                <el-table-column
                prop="orderDetailQuantity"
                label="购买商品数量">
                </el-table-column>
                <el-table-column
                prop="orderDetailPrice*orderDetailQuantity"
                label="购买商品总价">
                    <template slot-scope="scope">
                        {{scope.row.orderDetailPrice*scope.row.orderDetailQuantity}}
                    </template>
                </el-table-column>
                <el-table-column
                prop="orderDetailState"
                label="订单状态">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.orderDetailState==0?'danger':'success'">{{scope.row.orderDetailState==0?'未完成':'已完成'}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="showUpdate(scope.$index,scope.row)"
                        >修改订单状态</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 更改订单状态弹出框 -->
        <el-dialog title="更改订单状态" :visible.sync="updateVisible" width="30%">
            <el-form ref="form" :model="updateForm" label-width="70px">
                <el-form-item label="订单状态">
                     <el-select v-model="updateForm.orderDetailState">
                        <el-option
                            :key="0"
                            label="未完成"
                            :value="0">
                        </el-option>
                        <el-option
                            :key="1"
                            label="已完成"
                            :value="1">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateVisible = false">取 消</el-button>
                <el-button type="primary" @click="update">更 新</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
import {getOrders,getShops,updateOrder} from '@/api'

export default {
    data () {
        return {
            orders: [],
            shops: [],
            id: '',
            updateForm: {},
            updateVisible: false,
        }
    },
    methods: {
        changeShop(e){
            this.id = e
            this.getOrders(this.id)
        },
        getShops(){
            getShops().then(res => {
                this.shops = res.data
            })
        },
        showUpdate(index, row){
            this.idx = index
            this.updateForm = row
            console.log(row)
            this.updateVisible = true
        },
        update(){
            let fromData = new FormData()
            fromData.append('orderDetailId', this.orders[this.idx].orderDetailId)
            fromData.append('orderDetailState', this.updateForm.orderDetailState)
            updateOrder(fromData).then(res => {
                if (res.code === 0) {
                    this.updateVisible = false
                    this.$message({
                        type: 'success',
                        message: '更新成功'
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: '更新失败'
                    })
                }
            })
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }){
            if(columnIndex === 0){  //序号列也进行合并(第一列)
                //this.spanArr这个数组里面存的是table里面连续的有几条数据相同
                //例如:[1,1,2,0,2,0]
                //1  代表的没有连续的相同的
                //2  代表连续的两个相同
                //0  代表是和上一条内容相同
                const _row = this.spanArr[rowIndex];
                const _col = _row>0 ? 1 : 0;
                return {
                    rowspan: _row, //行
                    colspan: _col  //列
                }
            }
        },
        getOrders(id){
            getOrders(id).then(res => {
                this.orders = res.data
                this.rowspan()
            })
        },
        rowspan() {
            this.spanArr = [];//在data里面定义
            this.position = 0; //在data里面定义
            this.orders.forEach((item,index) => {
            if( index === 0){
                this.spanArr.push(1);
                this.position = 0;
                item.sequence=index+1;//设置序号
            }else{
                if(this.orders[index].orderDetailOrderId === this.orders[index-1].orderDetailOrderId ){
                    this.spanArr[this.position] += 1;//连续有几行项目名名称相同
                    this.spanArr.push(0); // 名称相同后往数组里面加一项0
                    console.log(this.spanArr)
                    //当项目名称相同时，设置当前序号和前一个相同
                    this.orders[index].sequence = this.orders[index-1].sequence;
                }else{
                    this.spanArr.push(1);
                    this.position = index;
                    //当项目名称不同时，将当前序号设置为前一个序号+1
                    this.orders[index].sequence = this.orders[index-1].sequence+1;
                }
            }
            })
        }
    },
    mounted () {
        this.getShops()
    }
}
</script>
<style scoped>
.red {
    color: red;
}
</style>